<!-- 成本分析 -->
<script lang="ts" setup>
import { getCostList } from "@/api/system/dataAnalysis";
import { onMounted, ref, reactive, toRefs } from "vue";
import { deptTreeSelect } from "@/api/role";
let CostingHeader = [
  { title: "类型", include: false, data: "costType" },
  {
    title: "年度累计",
    include: true,
    titleDate: ["笔数", "金额（万元）"],
  },
  {
    title: "上年同期",
    include: true,
    titleDate: ["笔数", "金额（万元）"],
  },
  { title: "金额变化率", include: false,  },
];
let departmentItems = ref([]);
let myData = ref([]);
let data = reactive({
  queryParams: {
    queryTime: "",
    deptNames: [],
  },
});
const { queryParams } = toRefs(data);

const DateTime = () => {
	const now = new Date();
	return (
	  now.getFullYear() + "-" +
	  (now.getMonth() + 1).toString().padStart(2, "0") + "-" +
	  now.getDate().toString().padStart(2, "0")
	);
};

const getList = async () => {
  if (queryParams.value.queryTime == '') {
		// console.log(DateTime())
		queryParams.value.queryTime = DateTime();
	}
  
  let res = await getCostList(queryParams.value);
  myData.value = res.data;
};
/** 查询部门下拉树结构 */
const getTreeSelect = async () => {
  const res = await deptTreeSelect();
  departmentItems.value = res.data;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  console.log(queryParams.value);
  getList();
};

const Resetting = () => {
  queryParams.value = {
    queryTime: "",
    deptNames: [],
  };
  getList();
};
onMounted(() => {
  getList();
  getTreeSelect();
});
</script>

<template>
  <VRow class="match-height">
    <VCol cols="12" md="12">
      <VCard>
        <VCardText class="py-10">
          <VRow class="match-height">
            <VCol cols="12" md="3">
              <div>
                <div>
                  <span class="demonstration">公司</span>
                </div>
                <el-tree-select
                  class="custom-tree-select"
                  v-model="queryParams.deptNames"
                  :data="departmentItems"
                  :props="{
                    value: 'label',
                    label: 'label',
                    children: 'children',
                  }"
                  value-key="id"
                  placeholder="请选择公司"
                  check-strictly
                  multiple
                />
              </div>
            </VCol>
            <VCol cols="12" md="3">
              <div class="block">
                <div>
                  <span class="demonstration">日期</span>
                </div>
                <el-date-picker
                  style="
                    background-color: rgb(var(--v-theme-surface));
                    inline-size: 100%;
                  "
                  v-model="queryParams.queryTime"
                  type="date"
                  align="right"
                  unlink-panels
                  placeholder="  请选择日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                >
                </el-date-picker>
              </div>
            </VCol>

            <VCol cols="12" md="2" class="display_flex-end">
              <VBtn color="primary" density="compact" @click="handleQuery">
                查询
              </VBtn>

              <VBtn variant="outlined" density="compact" @click="Resetting">
                重置
              </VBtn>
            </VCol>

            <VCol cols="12" md="12">
              <p style="margin-inline-end: 10px; text-align: end">
                单位: (万元)
              </p>

              <VTable class="text-no-wrap">
                <thead rule="all">
                  <tr>
                    <th
                      scope="col"
                      v-for="(item, index) in CostingHeader"
                      :key="index"
                      style="padding: 0; block-size: 80px"
                      class="fontColor"
                    >
                      <div class="th_th" style="padding: 20px">
                        {{ item.title }}
                      </div>
                      <div
                        class="th_td"
                        v-if="item.include == true"
                        style="
                          border-block-start: 1px solid #ddd;
                          padding: 10px 0;
                        "
                      >
                        <td
                          scope="col"
                          v-for="(mini, inx) in item.titleDate"
                          :key="inx"
                        >
                          {{ mini }}
                        </td>
                      </div>
                    </th>
                  </tr>
                </thead>

                <tbody>
                  <tr v-for="(item, index) in myData" :key="index">
                    <td class="text-high-emphasis">
                      <div class="tr_td">
                        {{ item.costType }}
                      </div>
                    </td>
                    <td>
                      <div class="tr_td">
                        <td>
                          {{ Math.ceil(Number(item.currentYearCount)) }}
                        </td>
                        丨
                        <td>
                          {{ Number(item.currentYearAmount).toFixed(2) }}
                        </td>
                      </div>
                    </td>

                    <td class="tbodyColor">
                      <div class="tr_td">
                        <td class="td_black">
                          {{ Math.ceil(Number(item.lastYearCount)) }}
                        </td>
                        丨
                        <td class="td_black">
                          {{ Number(item.lastYearAmount).toFixed(2) }}
                        </td>
                      </div>
                    </td>
                    <td>
                      <div class="tr_td">
                        {{ item.changeRate }}%
                      </div>
                    </td>
                  </tr>
                </tbody>
              </VTable>
            </VCol>
          </VRow>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>

<style lang="scss" scoped >
@use "@core/scss/template/libs/apex-chart.scss";

.display_flex-end {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}

.tr_td {
  display: flex;
  align-items: center;
  justify-content: space-around;

  td {
    inline-size: 30%;
    text-align: center;
  }
}

.th_td {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.th_th {
  display: flex;
  align-items: center;
  justify-content: center;
}

tr > td {
  border: 1px solid #ddd;
}

th {
  border: 1px solid #ddd;
}

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
  border-spacing: 0;
}

.fontColor {
  background-color: rgb(var(--v-global-theme-primary));
  color: #000;
  font-size: 18px;
  font-weight: bolder;
}
</style>
<style>
.custom-date-picker {
  background-color: rgb(var(--v-theme-surface));
  inline-size: 100%;
}

.el-picker-panel__footer {
  background-color: rgb(var(--v-theme-surface)) !important;
}

.el-picker-panel {
  background-color: rgb(var(--v-theme-surface)) !important;
}

.el-select__wrapper {
  background-color: rgb(var(--v-theme-surface)) !important;
}

.el-date-editor .el-input__inner {
  background-color: rgb(var(--v-theme-surface));
  font-size: 13px !important;
}

.el-input__prefix {
  display: none;
  background-color: rgb(var(--v-theme-surface));
}

.el-input__wrapper {
  background-color: rgb(var(--v-theme-surface)) !important;
  padding-block: 0;
  padding-inline: 2px;
}

.demonstration {
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  font-size: 13px;
}
</style>
